<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <include file="public@head" />

    <style>
        .sub_comment_list .comment{
            padding: 10px 0 8px;
            line-height: 20px;
            color: #666;
        }
        .auth_comment .comment,.auth_comment .sub_tool_group{
            padding-left: 44px;
        }

        .sub_tool_group{
            margin-bottom: 14px;
        }

        .sub_tool_group .reply_btn{
            color: #669966;
            cursor: pointer;
        }

        .sub_comment_list{
            border-left: 1px solid #e8e8e8;
            margin-left: 44px;
            padding: 0 24px 0 16px;
        }

        .sub_comment .name{
            color: #80aa9d;
            margin-right: 14px;
        }

        .detail_title{
            position: relative;
        }
        .back_btn{
            position: absolute;
            left: 0;
            padding-left: 44px;
            background: url("__TMPL__public/assets/img/icon_back.png") no-repeat 12px center;
            color: #999;
        }
        .back_btn:hover{
            color: #333;
            /*color: #5cdb96;*/
        }
        .new_comment{
            width: 638px;
            display: block;
            margin: 0 auto;
        }
        .user_input_wrap .user_input{
            outline: none;
            resize:none;
            /*border-style: none;*/
            box-shadow: none;
            text-decoration: none;
            /*border-width: 0px;*/
            word-wrap: break-word;
            /*line-height: 18px;*/
            padding: 12px 6px 0 10px;
            /*width: 580px;*/
            height: 44px;
            line-height: 18px;
            border: 1px solid #ccc;
            background: #f9f9f9;
            border-radius: 4px;
            overflow: auto;
            display: block;
            box-sizing: border-box;
            width: 100%;

        }

        .new_comment span.cancel_btn,.main_comment span.cancel_btn{
            color: #999;
            font-size: 16px;
            margin-top: 26px;
            cursor: pointer;

        }
        .new_comment span.send_btn,.main_comment span.send_btn{
            width: 68px;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            background: #04dd98;
            margin: 14px 0 0 30px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;

        }
        .sub_comment_list{
            min-height: 238px;
            margin-top: 22px;
        }
        .info .time{
            color: #ccc;
        }
        #content_wrap{
            margin: 20px 0 0 50px;
            height: 84px;
        }
        #content_wrap .pic_wrap{
            display: inline-block;
            width: 150px;
            height: 84px;
            vertical-align: middle;
            position: relative;
        }
        #content_wrap .pic_wrap img{
            width: 100%;
            height: 100%;
        }
        #content_wrap .pic_wrap .num{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 150px;
            height: 26px;
            background: rgba(0,0,0,0.5);
            color: #fff;
            font-size: 12px;
            text-align: center;
            line-height: 26px;
        }
        #content_wrap .text_wrap{
            width: 390px;
            height: 82px;
            display: inline-block;
            border: 1px solid #ccc;
            padding: 0 12px;
            vertical-align: middle;
        }

        #content_wrap .text_wrap .title{
            color: #ccc;
            margin: 12px 0 22px 0;
        }
        #content_wrap .text_wrap .content{

        }
    </style>

</head>
<body>
<include file="public@nav" />
<div class="center cirWrapper clearfix">
    <include file="public@messnav" />
    <div class="an_right_wra conmment_list fr">
        <h3>评论回复</h3>
        <ul class="sc_list_wra">
            <!-- <li class="sc_list">
                 <a href="##">
                     <div class="fl star_img_wra">
                         <img src="__TMPL__public/assets/img/user_img.png" alt="">
                         <span class="active"></span>
                     </div>
                     <div class="fl item_left">
                         <h4>刘涛</h4>
                         <p>明天下午两点两点两点两点两点</p>
                     </div>
                     <span class="fr sc_time">刚刚</span>
                 </a>
             </li>-->
        </ul>
    </div>
    <div class="an_right_wra conmment_detail displayNone fr">
        <h3 class="detail_title"><a class="back_btn fl" href="javascript:void(0)">评论回复列表</a> <span class="">详情</span></h3>
        <div class="ml_content_wra">
            <div class="ml_user_info clearfix">
                <img class="fl user_img" src="__TMPL__public/assets/img/user_img.png" alt="">
                <div class="fl">
                    <span class="user_name">贝贝猫</span>
                    <!--<span  class="user_leval_mark"></span>-->
                    <p class="ml_u_time">2小时前</p>
                </div>
                <span class="fl ml_icon">
                    评论
                </span>
            </div>
            <p class="ml_content_user">你还欠我们一个演唱会，要什么时候呢？</p>

            <div id="content_wrap">
                <div class="pic_wrap">
                    <img src="" alt="">
                    <span class="num">共1张</span>
                </div><div class="text_wrap">
                <p class="title">刘涛发布了图文动态</p>
                <p class="content">苦上加苦积分卡上岛咖啡has空间的罚款</p>
            </div>

            </div>

        </div>

        <div class="sub_comment_list">
            <div class="sub_comment">
                <div class="info">
                    <span class="name">刘涛</span><span class="time">2小时前</span>
                </div>
                <p class="comment">子评论文字子评论文字子评论文字子评论文字子评论文字子评论文字子评论文字</p>
                <div class="sub_tool_group clearfix">
                    <span data-name="刘涛" class="reply_btn fl">回复</span>
                    <span class="detel_btn fr">删除</span>
                </div>
            </div>
        </div>

        <!-- <div class="ml_reply">
             <div class="clearfix ml_re_title">
                 <span class="ml_star">刘涛回复贝贝猫</span>
                 <span class="ml_time fr">2分钟前</span>
             </div>
             <p>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</p>
         </div>
         <span class="ml_re_btn fl">回复</span>-->

        <div class="new_comment clearfix">
            <div class="clearfix user_input_wrap">
                <textarea placeholder="" name="" id="" class="user_input fr" cols="30" rows="10"></textarea>
            </div>
            <span class="fr send_btn">回复</span>
            <span class="fr cancel_btn">取消</span>
        </div>
    </div>

</div>

<include file="public@footer" />
<include file="public@scripts" />
<script type="text/javascript" src="__TMPL__public/assets/js/message.js"></script>
<script>
    headerMove(6);

    //评论列表回复
    var msgList_param = {
        url:'Messages/infoContent',
        data:{
            page:1,
            type:20,
            status:0,
            star:localStorage.u_type
        }
    };

    $.JsonRpc(msgList_param,function(data){
        data = data.data.list;
        var tpl = "";
        $.each(data,function(i){
            (data[i].c_status==10)?read_flag="active":read_flag="";
            tpl +=
                    '<li class="sc_list" data-c_parent="'+data[i].c_parent+'" data-c_cid="'+data[i].c_cid+'" data-cid="'+data[i].cid+'">'+
                    '<a href="javascript:void(0)">'+
                    '<div class="fl star_img_wra">'+
                    '<img src="'+data[i].u_avatar+'" alt="">'+
                    '<span class="'+read_flag+'"></span>'+
                    '</div>'+
                    '<div class="fl item_left">'+
                    '<h4>'+data[i].u_nickname+'</h4>'+
                    '<p>'+data[i].c_content+'</p>'+
                    '</div>'+
                    '<span class="fr sc_time">'+data[i].c_createtime.slice(0,16)+'</span>'+
                    '</a>'+
                    '</li>';
        });
        $(".sc_list_wra").html(tpl);
    });

    $(".sc_list_wra").on("click",".sc_list",function(){
        $(".conmment_detail").show();
        $(".conmment_list").hide();
        var c_cid = $(this).data("c_cid");
        var cid = $(this).data("cid");
        var name_send = $(this).data("name_send");
        var c_parent = $(this).data("c_parent");
        $(".name_send").html(name_send);
        $(".name_send").attr("data-c_cid",c_cid);
//        详情
        var conmment_param = {
            url:'Messages/commentContent',
            data:{
                parent:cid,
                page:1
            }
        };
        $.JsonRpc(conmment_param,function(data){
            console.log(data);
            data = data.data;
            var c_cid = data.c_cid;
            var cid = data.cid;
            var pic_html="";
            if(data.c_images&&data.c_images!=""){
                var c_images = data.c_images.split(",");
                var le = c_images.length;
                pic_html =
                '<div class="pic_wrap">'+
                '<img src="'+c_images[0]+'" alt="">'+
                '<span class="num">共'+le+'张</span></div>';
            }
            var tpl =
                    '<div class="ml_user_info clearfix">'+
                        '<img class="fl user_img" src="'+data.u_avatar+'" alt="">'+
                            '<div class="fl">'+
                                '<span class="user_name">'+data.u_nickname+'</span>'+
                                '<p class="ml_u_time">'+ iService.timeFormat(data.createtime)+'</p>'+
                            '</div>'+
                            '<span class="fl ml_icon">留言</span>'+
                    '</div>'+
                    '<p class="ml_content_user">'+data.comment+'</p>'+
                    '<div id="content_wrap">'+
                        '<a href="../Circle/detail.html?cid='+data.c_cid+'">'+
                         pic_html+'<div class="text_wrap">'+
                        '<p class="title">'+data.s_name+'发布了图文动态</p>'+
                        '<p class="content">'+data.c_content+'</p>'+
                        '</a>' +
                        '</div>'+
                    '</div>';

            $(".ml_content_wra").html(tpl);
            $(".user_input").attr({"data-c_udid":data.u_udid,"placeholder":"回复"+data.u_nickname});
            var tpl_sub = "";
            $.each(data.list,function(i){
                tpl_sub +=
                    '<div class="sub_comment">'+
                    '<div class="info">'+
                    '<span class="name">'+data.list[i].cnickname+'回复：'+data.list[i].pnickname+'</span><span class="time">'+ iService.timeFormat(data.list[i].c_createtime)+'</span>'+
                    '</div>'+
                    '<p class="comment">'+data.list[i].c_content+'</p>'+
                    '<div class="sub_tool_group clearfix">'+
                    '<span data-c_udid="'+data.list[i].c_udid+'" data-name="'+data.list[i].cnickname+'" class="reply_btn fl">回复</span>'+
                    '<span class="detel_btn fr">删除</span>'+
                    '</div>'+
                    '</div>';
            });
            $(".sub_comment_list").html(tpl_sub);

            $(".reply_btn").on("click",function(){
                $(".user_input").attr({"data-c_udid":$(this).data("c_udid"),"data-name":$(this).data("name"),"placeholder":$(this).data("name")});
            });

            $(".send_btn").on("click",function(){
//                var cid = $(".user_input").data("c_parent");
                var comList_param = {
                    url:'Circles/comSend',
                    data:{
                        cid: c_cid,
                        description: $(".user_input").val(),
                        parent: cid,
                        pudid: $(".user_input").data("c_udid"),
                        type: 20
                    }
                };
                $.JsonRpc(comList_param,function(data){
                    if(data.code==200){
                        data = data.data;
                        var tpl =
                                '<div class="sub_comment">'+
                                '<div class="info">'+
                                '<span class="name">'+data.comment.u_nickname+'回复:'+$(".user_input").data("name")+'<span class="time">'+data.comment.c_createtime.slice(0,16)+'</span>'+
                                '</div>'+
                                '<p class="comment">'+data.comment.c_content+'</p>'+
                                '<div class="sub_tool_group clearfix">'+
                                '<span data-c_parent="'+data.comment.c_cid+'" data-name="'+data.comment.u_nickname+'" class="reply_btn fl">回复</span>'+
                                '<span class="detel_btn fr">删除</span>'+
                                '</div>'+
                                '</div>';
                        $(tpl).prependTo(".sub_comment_list");
                        $(".user_input").val("");
                    }
                });
            });

        });
    });

    $(".center").on("click",".back_btn",function(){
        location.reload();
    });

</script>
</body>
</html>

















